import React, { useState } from 'react';
import { Sheet } from './Sheet';
import { Droppable, GridContainer, DraggableOverlay } from '../../components';
import { IDropVesselItem } from '../../internals/dropEl';

interface IProps {
  dropVesselList: IDropVesselItem[];
  setContentScrollTop?: (contentScrollTop: number) => void;
}

function DroppableContainer(props: IProps) {
  const { dropVesselList, setContentScrollTop } = props;

  console.log('dropVesselList', dropVesselList);

  return (
    <div style={{ width: 500 }}>
      <Sheet header="playground" setContentScrollTop={setContentScrollTop}>
        <p>拖拽组件搭建页面</p>
        <GridContainer columns={1}>
          {dropVesselList.map((vessel) => {
            return (
              <Droppable
                key={vessel.vesselId}
                id={vessel.vesselId}
                dragging={false}
                data={{ accepts: ['template'] }}
              >
                {null}
              </Droppable>
            );
          })}
        </GridContainer>

        <p style={{ lineHeight: 2 }}>
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
          himenaeos. Nam nisi tortor, egestas volutpat tortor auctor, efficitur molestie urna.
          Vestibulum blandit erat massa, eu ornare diam porttitor at.
        </p>
      </Sheet>
      {/* <DraggableOverlay /> */}
    </div>
  );
}

export default DroppableContainer;
